<!-- 配置中心-配置管理-菜单管理 -->
<template>
  <div class="u-page-full">
    <el-table
      ref="tableRef"
      :data="tableData"
      border
      highlight-current-row
      style="width: 100%"
    >
      <template></template>
      <el-table-column v-for="(item,index) in columnList" :prop="item.dataIndex" :label="item.title" align="left"></el-table-column>
      <el-table-column label="显示名称" align="center">
        <template #default="{ row }">
          <div class="editable-row-operations">
            <span v-if="editTableData[row.id]">
              <el-button type="link" @click="save(row.id)">保存</el-button>
              <el-popconfirm title="Sure to cancel?" @confirm="cancel(row.id)">
                <el-button type="link">取消</el-button>
              </el-popconfirm>
            </span>
            <span v-else>
              <el-button type="link" @click="edit(row)">编辑</el-button>
            </span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref } from 'vue'
// import { cloneDeep } from 'lodash'
import { getMenu, getEditMenu, editMenu } from '@/api/test/menu'
import { DataItem } from '@/@types/setting'

export default defineComponent({
  name: 'menu-manage',
  setup() {
    const columnList = [
      {
        title: 'id',
        dataIndex: 'id',
        key: 'id',
        fixed: 'left',
        width: 100
      },
      {
        title: '名称',
        dataIndex: 'name',
        key: 'name',
        fixed: 'left',
        width: 100
      },
      {
        title: '菜单层级',
        dataIndex: 'level_display',
        key: 'level_display',
        width: 100
      },
      {
        title: '父级菜单',
        dataIndex: 'parent_level_display',
        key: 'parent_level_display',
        width: 100
      },
      {
        title: 'alias',
        dataIndex: 'alias',
        key: 'alias',
        width: 100
      },
      {
        title: '项目id',
        dataIndex: 'project_id',
        key: 'project_id',
        width: 100
      },
      {
        title: '层级',
        dataIndex: 'level',
        width: 100,
        key: 'level'
      },
      {
        title: '父级层级',
        dataIndex: 'parent_level',
        key: 'parent_level',
        width: 100
      },
      {
        title: 'icon',
        dataIndex: 'icon',
        key: 'icon',
        width: 100
      },
      {
        title: '排序',
        dataIndex: 'order',
        key: 'order',
        width: 100
      },
      {
        title: '是否隐藏',
        dataIndex: 'ishide',
        key: 'ishide',
        width: 100
      },
      {
        title: '文件路径',
        dataIndex: 'path',
        key: 'path',
        width: 100
      },
      {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        fixed: 'right',
        width: 150
      }
    ]
    const loading = ref<boolean>(false)
    const data: DataItem[] = []
    const tableData = ref(data)
    // 怎么理解这个类型
    // const editTableData: UnwrapRef<Record<number, DataItem>> = reactive({})
    const editTableData: any = reactive({})

    /**
     *
     * @param val
     */

    const edit = (val: DataItem) => {
      editTableData[val.id] = val
      // editTableData[val] = cloneDeep(tableData.value.filter((item) => val === item.id)[0])
      console.log(`editTableDatel-${val}`, editTableData[val.id])
      console.log('editTableData', editTableData)
      console.log('编辑', val)
    }

    // 保存
    const save = (val: number) => {
      // Object.assign(tableData.value.filter((item) => val === item.id)[0], editTableData[val])
      // console.log(editTableData[val], editTableData[val].id)
      editMenu(editTableData[val], editTableData[val].id)
        .then(() => {
          console.log('修改成功！')
          getMenu()
        })
        .catch((err) => {
          console.log(err)
        })
      // console.log('保存', tableData.value)
      delete editTableData[val]
    }

    // 取消
    const cancel = (val: number) => {
      delete editTableData[val]
      console.log('取消', val)
    }

    // 获取菜单栏
    const getMenus = () => {
      loading.value = true
      getEditMenu()
        .then((res: any) => {
          // 有展开的,树形菜单表格
          // tableData.value = res.data.results.order_menu
          // 无展开表格
          // tableData.value = res.data.results.menu_authority
          tableData.value = res
          loading.value = false
          // console.log('tableData', tableData.value)
        })
        .catch((err) => {
          loading.value = false
          console.log('err', err)
        })
    }

    onMounted(() => {
      getMenus()
    })

    return {
      loading,
      columnList,
      tableData,
      editTableData,
      edit,
      save,
      cancel
    }
  }
})
</script>

<style lang="scss" scoped>
.ant-table-striped :deep(.table-striped) td {
  background-color: #fafafa;
}
</style>
